'use client'
import { WechatFilled } from '@ant-design/icons';
import { Divider } from 'antd';
import React, { useState } from 'react';
import Register from './Register';
import Login from './Login';
import Clause from "@/app/components/LoginModal/Clause";

interface IProps {
  closeModal: () => void;
}

const LoginModal = (props: IProps) => {
  const { closeModal } = props;
  const [flag, setFlag] = useState<boolean>(false)

  const loginOrRegister = () => {
    setFlag(!flag)
  }

  return <div className='fixed top-0 left-0 overflow-hidden w-full h-full bg-[#000000b3] text-white'>
    <div className='md:w-[50rem]  xs:w-11/12 absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 bg-white text-black '>
      <div className='p-1 flex justify-end cursor-pointer ' onClick={() => closeModal()}>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className=" size-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
        </svg>
      </div>

      <div className='flex'>

        <img className='w-96 md:flex hidden' src="images/login.jpg" />

        <div className='pt-[70px] pr-5 ml-5 w-full'>
          {/*tab*/}
          <ul className='flex text-gray-300 text-[12px] mb-3 lg:w-full relative'>
            <li className={flag ? 'mr-4 cursor-pointer' : "mr-4 cursor-pointer text-black"} onClick={() => loginOrRegister()}>密码登录</li>
            <li className={flag ? 'mr-4 cursor-pointer text-black' : "mr-4 cursor-pointer"} onClick={() => loginOrRegister()}>验证码登录</li>
          </ul>

          {/*登录注册*/}
          {flag ? <Register /> : <Login toRegister={() => loginOrRegister()} />}

          <Divider><span className='text-[12px] text-gray-400'>或</span></Divider>

          {/*微信登录*/}
          <div className='mb-5 flex justify-center  bg-white text-black rounded-md p-[10px] border-[#eee] border text-[12px] text-center'>
            <WechatFilled style={{ fontSize: 16, color: 'green' }} />
            <span className='ml-2'>微信登录</span>
          </div>

          {/*条款*/}
          <Clause />
        </div>
      </div>
    </div>
  </div>
}

export default LoginModal;